<template>
  <div style="position: relative;min-height: 100vh;background-color: #fff;">
    <!-- <heade-return :title-params="name"></heade-return> -->
    <div style="padding: 15px 17px;" v-if="detailObj.optionalDo">
        <div>
            <img style="width:40px;" src="../assets/img/logo.svg" alt="">
            <span style="font-size: 14px;font-weight: bold;margin-left:10px;line-height: 40px;">下载淘金客</span>
            <!-- <span @click="downApp" style="padding:7px 22px;font-size: 14px;color:#fff;background-image: linear-gradient(to right,#FF5AA0,#FF2E67);border-radius: 22px;float: right;">APP下载</span> -->
        </div>
        <div>
            <img style="width: 100%;margin-top:20px;margin-bottom: 15px;" :src="detailObj.optionalDo.pictUrl" alt="">
        </div>
        <div style="font-size: 14px;font-weight: bold;">
            {{detailObj.optionalDo.title}}
        </div>
        <div class="sheat-list-price">
            ¥{{(detailObj.optionalDo.zkFinalPrice-detailObj.optionalDo.couponAmount).toFixed(1)}}
            <span style="font-size: 10px;color:#FF2E67;border: 1px solid #FF2E67;border-radius: 3px;padding:0 3px;">券后</span>
            <span style="text-decoration: line-through;color:#bbb;font-size: 14px;">￥{{detailObj.optionalDo.zkFinalPrice}}</span>
            <div class="sheat-list-youhui">券</div>
            <div class="jiantou"></div>
            <div class="sheat-list-youhui-right">
                <span>￥{{detailObj.optionalDo.couponAmount}}</span>
            </div>
        </div>
        <div style="background-color: #F1F1F1;padding:15px 10px;">
            <div>
                <span style="font-size: 14px;font-weight: bold;color:#000;">({{textVal}})</span>
                <span class="copeLink" @click="copyActiveCode" v-clipboard:copy="textVal">一键复制</span>
            </div>
            <div style="font-size: 11px;margin-top:16px;">
                复制此条信息，（{{textVal}}），【打开手机淘宝即可查看】
            </div>
        </div>
        <div @click="downApp" style="margin-top:15px;width: 100%;padding:13px 15px;background-image: linear-gradient(to right,#FF5AA0,#FF2E67);border-radius: 22px;color:#fff;font-size: 14px;font-weight: bold;text-align: center;">
            注册淘金客，立即省钱
        </div>
    </div>
  </div>
</template>

<script>
    import headeReturn from "./public/head"
    import Clipboard from 'clipboard'
    import { Toast } from 'vant'
    export default {
        components:{
            headeReturn
        },
        name: "shareProPage",
        data(){
            return{
                name:'分享',
                detailObj:{},
                textVal:'',
                userId:'',
                inviteCode:''
            }

        },
        mounted() {
            // this.detailObj = JSON.parse(localStorage.getItem('shareDetail'));
            var numId = this.$route.params.id.split(',')[0];
            this.userId = this.$route.params.id.split(',')[1];
            this.inviteCode = this.$route.params.id.split(',')[2];
            this.$http.get(this.utils.config + "/netmall/app/taobao/api/app/detail/skipProductDetail?numIid="+numId).then((data) => {
                if (data.data.success) {
                    this.detailObj = data.data.result;
                    // this.textVal = this.detailObj.optionalDo.token;
                    this.$http.get(this.utils.config +"/netmall/app/taobao/api/getNewShareToken?num_iid="+numId+"&user_id="+this.userId).then((res) => {
                        this.textVal = res.data.result.token;  
                    })  
                }
            })
        },
        methods:{
            //复制文案
            copyActiveCode() {
                Toast("复制成功");
            },
            downApp(){
                // this.$http.post(this.utils.config+"/netmall/app/person/api/getPersonCenterData?user_id="+this.userId).then((data) => {
                //     this.inviteCode = data.data.result.tbMnUser.inviteCode;
                // })
                window.open("http://www.taojinke.top/shopIndex/#/registerOut/"+this.inviteCode);
            }
        }

    }
</script>

<style scoped>
    .copeLink{
        position: absolute;right: 30px; font-size: 12px;color:#fff;padding:7px 15px;background-image: linear-gradient(to right,#FF5AA0,#FF2E67);border-radius: 22px;
    }
    .sheat-list-price{
        margin-top: 10px;
        margin-bottom: 15px;
        text-align: left;
        font-size:20px;
        font-family:DIN-Medium,DIN;
        font-weight:500;
        color:rgba(255,46,103,1);
        line-height:24px;
        position: relative;
    }
    .sheat-list-youhui{
        text-align: center;
        width:21px;
        border-width:0 37px 100px 37px;
        height:15px;
        background:rgba(255,46,103,1);
        border-radius:2px 0px 0px 2px;
        font-size:10px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:15px;
        position: absolute;
        right: 56px;
        top:5px

    }
    .sheat-list-youhui-right{
        text-align: center;
        width:56px;
        border-width:0 37px 100px 37px;
        height:15px;
        background: rgb(255, 229, 252);
        border-radius:2px 0px 0px 2px;
        font-size:10px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        /*color:rgba(255,46,103,1);*/
        line-height:15px;
        position: absolute;
        right: 0px;
        top:5px;
        z-index: 2;
    }
    .sheat-list-youhui-right span{
        color: rgba(255,46,103,1);
    }
    .jiantou{
        position: absolute;
        right: 48px;
        top:5px;
        width: 0;
        height: 0;
        border-top: 6px rgba(255,46,103,1) solid ;
        border-right:  4px transparent solid ;
        border-left:4px rgba(255,46,103,1) solid;
        border-bottom: 8px transparent solid;
        z-index: 10;
    }
</style>
